import { View, Text, Image, Video } from '@tarojs/components'
import React, { useCallback, useEffect, useRef, useState } from 'react'
import styles from './index.module.less'
import Picker from './picker/Picker'
import cityList from './city'


const CityPicker = React.forwardRef((props, ref) => {
  const { cancelSelectCity, saveCity } = props

  const [state, setState] = useState({
    selector: cityList,
    selectorChecked: ['110000', '110100'],
  })

  useEffect(() => {}, [])

  React.useImperativeHandle(ref, () => ({}))

  const onChange = (e, index) => {
    if (!e[1]) {
      console.info('🚀 ~ file:PagePicker method:onChange line:21 -----', '切换省份')
      let findData = cityList.find(d => d.code === e[0])
      if (findData) {
        setState((prevState)=> {
          return {
            ...prevState,
            selectorChecked: [e[0], findData.children[0].code]
          }
        })
      } else {
        setState((prevState)=> {
          return {
            ...prevState,
            selectorChecked: ['110000', '110100']
          }
        })
      }
    }
  }

  const cancelFn = () => {
    cancelSelectCity()
  }

  const submitFn = () => {
    saveCity(state.selectorChecked)
  }

  return (
    <>
      <View className={styles['picker-warp']}>
        <View className={styles['picker-title']}>选择城市</View>
        <Picker
          mode='multiSelector'
          popup={false}
          value={state.selectorChecked}
          columnsFieldNames={{
            text: 'text',
            value: 'code',
            children: 'children',
          }}
          columns={cityList}
          onChange={onChange}>
        </Picker>
        <View className={styles['mask-btn-warp']}>
          <View className={styles['mask-btn']} onClick={() => cancelFn()}>
            取消
          </View>
          <View className={styles['mask-btn-active']} onClick={() => submitFn()}>
            确认
          </View>
        </View>
      </View>
    </>
  )
})

export default CityPicker
